﻿<template>
  <div class="container" style="width:99%;margin-top:-25px;">
    <!-- 查询条件 -->
    <div class="query-box">
      <el-form :model="queryBox" status-icon ref="queryBox">
        <el-row>
          <el-col :span="4">
            <el-form-item label prop="code">
              <el-input v-model="queryBox.orderId" placeholder="订单号">
                <template slot="prepend">订单号</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">成单产品</div>
              <el-select filterable clearable v-model="queryBox.product" placeholder="请选择">
                <el-option
                  v-for="item in order_product_options"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >{{item.value}}</el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">是否确认收款</div>
              <el-form-item>
                <el-select clearable v-model="queryBox.isReceivables" placeholder="请选择">
                  <el-option
                    v-for="item in collection_options"
                    :key="item.value"
                    :label="item.value"
                    :value="item.key"
                  >{{item.value}}</el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="4">
            <el-form-item label prop="code">
              <el-input v-model="queryBox.phone" placeholder="学生手机号">
                <template slot="prepend">学生手机号</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">订单状态</div>
              <el-form-item>
                <el-select clearable v-model="queryBox.isReturn" placeholder="请选择">
                  <el-option
                    v-for="item in order_status_options"
                    :key="item.value"
                    :label="item.value"
                    :value="item.key"
                  >{{item.value}}</el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">所属部门</div>
              <el-select filterable clearable v-model="queryBox.threeLevelDepartment" placeholder="所属部门">
                <el-option
                  v-for="item in threeLevelDepartmen_options"
                  :key="item.id"
                  :label="item.deptName"
                  :value="item.id"
                >{{item.deptName}}</el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">支付方式</div>
              <el-select filterable clearable v-model="queryBox.payType" placeholder="支付方式">
                <el-option
                  v-for="item in payType_options"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >{{item.value}}</el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <el-form-item label prop="code">
              <el-input v-model="queryBox.payNum" placeholder="支付单号">
                <template slot="prepend">支付单号</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <!-- <el-form-item label prop="code">
              <el-input v-model="queryBox.orderId" placeholder="咨询师">
                <template slot="prepend">咨询师</template>
              </el-input>
            </el-form-item> -->
            <div class="depart-box">
              <div class="slect-title">咨询师</div>
              <el-form-item>
                <el-select filterable clearable v-model="queryBox.belongTo" placeholder="咨询师">
                  <el-option
                    v-for="item in belongToStr_options"
                    :key="item.id"
                    :label="item.realName"
                    :value="item.id"
                  >{{item.realName}}</el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="4">
            <el-form-item label prop="code">
              <el-input v-model="queryBox.invoice" placeholder="发票信息">
                <template slot="prepend">发票信息</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- <el-col :span="4">
            <el-form-item label prop="code">
              <el-input v-model="queryBox.orderId" placeholder="地区">
                <template slot="prepend">地区</template>
              </el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <div class="depart-box">
              <div class="slect-title">成单时间</div>
              <el-date-picker
                v-model="createDate"
                type="daterange"
                :start-placeholder="'开始时间'"
                :end-placeholder="'结束时间'"
                range-separator="至"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="depart-box">
              <div class="slect-title">确认收款时间</div>
              <el-date-picker
                v-model="receivablesDate"
                type="daterange"
                :start-placeholder="'开始时间'"
                :end-placeholder="'结束时间'"
                range-separator="至"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </el-col>
          <el-col :span="7">
            <el-row class="area">
              <el-col :span="4">
                <span class="city-title">所在地区：</span>
              </el-col>
              <el-col :span="19" style="margin-left:-1px">
                <el-form-item label prop="area">
                  <el-cascader
                    clearable
                    size="large"
                    :options="options"
                    v-model="selectedOptions"
                  ></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          perms="true"
          type="primary"
          @click="reset('queryBox')"
        />
        <kt-button :label="$t('action.search')" perms="true" type="primary" @click="search" />
      </div>
    </div>
    <div class="add-btns fl">
      <kt-button
        :label="$t('导出')"
        perms="customerSea:student:export"
        type="primary"
        @click="handleExport"
        style="float:left;"
      />
    </div>
    <!--表格内容栏-->

    <Crm-table
      OrderReview
      class="table-width"
      permsEdit="Financial:OrderReview:isReceivables"
      width="400"
      permsSee="true"
      @handleEdit="handleEdit"
      :data="pageResult"
      :columns="columns"
      :loading="loading"
      @findPage="findPage"
    ></Crm-table>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import { baseUrl } from "@/utils/global";
import { CodeToText } from "element-china-area-data"; 
import axios from "axios";
import { regionDataPlus } from "element-china-area-data";
import Cookies from "js-cookie";
export default {
  name: "Student",
  components: {
    PopupTreeInput,
    CrmTable,
    KtButton,
    CrmSwitch
  },
  data() {
    return {
      isShowFlag: 0, //0:初始化部门、人员不显示  1:部门显示 2：人员显示
      aa: true,
      checkedPeson: 0,
      size: "small",
      // 查询条件
      student_data_from_options: [
        {
          label: " ",
          key: " "
        }
      ],
      grade_cache_gradeOptions: [],
      student_type_options: [],
      collection_options: [
        {
          value: "是",
          key: "1"
        },
        {
          value: "否",
          key: "2"
        }
      ],
      student_data_from_type_options: [
        {
          label: " ",
          key: " "
        }
      ],
      student_import_department: [],
      queryBox: {
        name: "",
        dataFrom: "",
        type: "",
        dataFromType: "",
        progress: "",
        code: "",
        phone: "",
        school: "",
        providerTeacher: "",
        providerAgent: "",
        createDate: "",
        moveDate: "",
        belongToPerson: "",
        pageNum: 0,
        pageSize: 0,
        importDepartment: "",
        isReturn: "",
        product: "",
        isReceivables: "",
        threeLevelDepartment:'',
        belongTo:'',
        payType:''
      },
      width: 200,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "orderId", label: "订单号", minWidth: 120 },
        { prop: "product", label: "成单产品", minWidth: 100 },
        { prop: "money", label: "成单金额", minWidth: 70 },
        { prop: "classNum", label: "课时数", minWidth: 80 },
        { prop: "studentName", label: "学生姓名", minWidth: 120 },
        { prop: "phone", label: "学生手机号", minWidth: 100 },
        { prop: "studentCode", label: "客户编号", minWidth: 150 },
        { prop: "signDate", label: "成单时间", minWidth: 140 },
        { prop: "receivablesDate", label: "确认收款时间", minWidth: 140 },
        { prop: "isReturnStr", label: "订单状态", minWidth: 100 },
        { prop: "belongToStr", label: "咨询师", minWidth: 120 },
        { prop: "threeLevelDepartmentStr", label: "所属部门", minWidth: 100 },
        { prop: "payTypeStr", label: "支付方式", minWidth: 100 },
        { prop: "payNum", label: "支付单号", minWidth: 100 },
        { prop: "invoice", label: "发票信息", minWidth: 100 },
        { prop: "diqu", label: "地区", minWidth: 180 },
        { prop: "isReceivables", label: "是否确认收款", minWidth: 100 }
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {
        content: []
      },
      student_type_options: [],
      operation: true, // true:新增, false:编辑
      batchdistribution: false, //显示批量分配弹窗
      customerownership: false, //显示客户归属弹窗
      selectionsLength: "",
      deptTreeProps: {
        label: "name",
        children: "children"
      },
      roles: [],
      selections: [], //选中列表集合
      ids: [], //分配ID集合
      ids2: [],
      deptData: [], //部门树
      deptTree: {
        label: "deptName",
        children: "children"
      },
      deptinputValue: "",
      // 划分方式
      deptmodeoptionsValue: "",
      submitID: "",
      deptId: "",
      userID: "", //人员ID
      deptuseroption: [], //部门用户
      deptuseroptionValue: "",
      branchcenter: [], //分中心下拉
      branchcenterValue: "",
      branchcenterValueID: "",
      branchcenterCodeValue: "", //分中心编码
      addstuformData: {},
      student_type_options: [],
      trackingDate: "",
      createDate: "",
      loading: false,
      gradeCache: "",
      deptData: [], //部门树
      deptTree: {
        label: "deptName",
        children: "children"
      },
      deptinputValue: "",
      userName: "",
      branchCenterName: "",
      selections: [], //选中列表集合
      batchdistribution: false, //显示批量分配弹窗
      resources_Options: [],
      order_status_options: [
        {
          value: "已成单",
          key: "2"
        },
        {
          value: "已退单",
          key: "1"
        }
      ],
      order_product_options: [],
      student_progress_change: [],
      receivablesDate: "",
      threeLevelDepartmen_options:[],
      belongToStr_options:[],
      //   地区
      options: regionDataPlus,
      selectedOptions: [],
    };
  },
  methods: {
    // 搜索
    search() {
      this.loading = true;
      this.queryBox.createDateStart = this.createDate[0];
      this.queryBox.createDateEnd = this.createDate[1];
      this.queryBox.province = this.selectedOptions[0];
      this.queryBox.city = this.selectedOptions[1];
      this.queryBox.area = this.selectedOptions[2];
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.queryBox.receivablesDateStart = this.receivablesDate[0];
      this.queryBox.receivablesDateEnd = this.receivablesDate[1];
      this.queryBox.queryInterface = "2";
      this.$api.student.studentSignList(this.queryBox)
        .then(res => {
          let content = {
            content: res.listStudentSignInfo,
            totalSize: res.total
          };
          this.pageResult = content;
          this.pageResult.content.forEach(item => {
            item.diqu=item.province?item.province+item.city+item.area+(item.areaInput?item.areaInput:''):''
            if (item.isReceivables == "否") {
              item.isReceivables2 = "1";
            } else {
              item.isReceivables2 = "2";
            }
            this.order_product_options.forEach(type_item => {
              if (type_item.key == item.product) {
                item.product = type_item.value;
              }
            });
          });
          this.loading = false;
        })
        .then(data != null ? data.callback : "");
    },
    // 重置
    reset(queryBox) {
      this.$refs.queryBox.resetFields();
      this.queryBox.orderId = "";
      this.queryBox.dataFrom = "";
      this.queryBox.progress = "";
      this.queryBox.product = "";
      this.queryBox.providerAgent = "";
      this.createDate = "";
      this.trackingDate = "";
      this.queryBox.dataFromType = "";
      this.queryBox.createDateStart = "";
      this.queryBox.createDateEnd = "";
      this.queryBox.trackingDateStart = "";
      this.queryBox.trackingDateEnd = "";
      this.selectedOptions = [];
      this.queryBox.province = "";
      this.queryBox.isReceivables = "";
      this.queryBox.isReturn = "";
      this.pageRequest.pageNum = 1;
      this.queryBox.phone = "";
      this.queryBox.grade = "";
      this.userName = "";
      this.branchCenterName = "";
      this.queryBox.dataFromGroupKey = "";
      this.queryBox.importDepartment = "";
      this.queryBox.isTmkContacted = "";
      this.receivablesDate = "";
      this.queryBox.receivablesDateStart = "";
      this.queryBox.receivablesDateEnd = "";
      this.queryBox.phone=''
      this.queryBox.belongTo=''
      this.queryBox.threeLevelDepartment=''
      this.queryBox.payNum=''
      this.queryBox.invoice=''
      this.queryBox.payType=''
      this.selectedOptions = [];
      this.queryBox.province = "";
      this.queryBox.city = "";
      this.queryBox.area = "";
      this.loading = true;
      this.findPage(null);
    },

    // 确认收款
    handleEdit: function(params) {
      this.$confirm("该笔订单是否已经收到款项？", "确认收款", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.$api.student
          .receivablesOrRefunds({
            id: params.row.id,
            isReceivables: params.row.isReceivables2
          })
          .then(res => {
            if (res.result == 1) {
              this.$message({
                type: "success",
                message: res.msg
              });
              this.findPage(null);
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
              this.findPage(null);
            }
          });
      });
    },

    // 导出
    handleExport() {
      axios({
        method: "get",
        url: baseUrl + "/studentSign/exportCheck",
        params: this.queryBox
      }).then(res => {
        window.open(res.request.responseURL);
      });
    },

    // 获取选中的表格数据
    selectionChange: function(selections) {
      this.selections = selections.selections;
    },
    // 获取成单产品
    get_order_product() {
      this.order_product_options = JSON.parse(
        localStorage.getItem("orderPoductOptions")
      );
      // 获取咨询师
      this.$api.dropdown.users({ userType: 3, deptType: 1 }).then(res=>{
        this.belongToStr_options=res.userInfoList
      })
      this.payType_options=JSON.parse(localStorage.getItem('studentPayType'))
      this.$api.dropdown.deptLevel3().then(res=>{
        this.threeLevelDepartmen_options=res.departmentInfoList
      })
    }
  },
  mounted() {
    this.get_order_product();
  }
};
</script>
<style >
@import url("../../assets/queryBox.css");
</style>
<style lang='scss' scoped>
.checked-person {
  display: block;
  float: left;
  margin-top: -10%;
  margin-left: 35%;
}
.batchdistribution-pop-tit {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  color: #303133;
}
.checked-person {
  font-weight: 500;
  display: inline-block;
  text-align: center;
  margin: 3% 0 3% 40%;
}
.batchdistribution-pop-tit {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  color: #303133;
}
.demo-form-inline {
  width: 90%;
  margin: 0 auto;
  .el-dialog__body .el-input {
    width: 93% !important;
  }
  .el-select {
    width: 100% !important;
  }
  .tit {
    display: inline-block;
    margin-top: 10%;
  }
}
.el-dialog__wrapper .el-form-item__content {
  margin-left: 0;
}
</style>
<style lang='scss'>
.batchdistribution-pop {
  .el-dialog__header {
    text-align: left;
    margin-left: 10%;
    font-weight: bold;
  }
}
.batchdistribution-pop .el-dialog__header {
  padding: 0 0 0 0 !important;
}
.batchdistribution-pop .el-autocomplete {
  width: 100% !important;
}
</style>


